<%@page import="com.home.qh.model.TransGoodsDesc"%>
<%@page import="com.home.qh.model.CtrKindPackage"%>
<%@page import="com.home.qh.model.KindPackage"%>
<%@page import="com.home.qh.model.Equipment"%>
<%@page import="com.home.qh.model.Commodity"%>
<%@page import="com.home.qh.model.Voyage"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="com.home.qh.model.TransFreight"%>
<%@page import="com.home.qh.model.Fee"%>
<%@page import="com.home.qh.model.AdditionalClause"%>
<%@page import="com.home.qh.model.Clause"%>
<%@page import="com.home.qh.model.Paying"%>
<%@page import="com.home.qh.model.Booking"%>
<%@page import="com.home.qh.model.Port"%>
<%@page import="com.home.qh.model.City"%>
<%@page import="com.home.qh.model.Customer"%>
<%@page import="java.util.List"%>
<%@page import="com.home.qh.model.TransParty"%>
<%@ include file="/common/taglibs.jsp"%>

<head>
<title><fmt:message key="Booking.Title" />
</title>
<meta name="heading" content="<fmt:message key='Booking.Title'/>" />
<meta name="menu" content="editBookingMenu" />
<script type="text/javascript" src="<c:url value='/scripts/jquery/ui/jquery.ui.button.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/jquery/ui/jquery.ui.datepicker.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/jquery.tokeninput.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/jquery.numeric.js'/>"></script>
<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/tokeninput/token-input.css'/>" />
<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/tokeninput/token-input-facebook.css'/>" />
<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/tokeninput/token-input-facebook-tiny.css'/>" />
<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/tokeninput/token-input-facebook1.css'/>" />

<style>
#toolbar2 {
	padding: 10px 10px;
}

</style>
</head>

<%
	SimpleDateFormat simpleDateFormat = new SimpleDateFormat("dd/MM/yyyy");
	int transPatiesSize = 0;
	List<TransParty> transPartyListing = (List<TransParty>) request.getAttribute("transParties");
	Booking booking = (Booking)request.getAttribute("booking");
	if (transPartyListing != null){
		transPatiesSize = transPartyListing.size(); 
	}
	
	List<TransFreight> transFreightListing = (List<TransFreight>)request.getAttribute("transFreights");
	int transFreightSize = 0;
	if (transFreightListing!=null)
		transFreightSize = transFreightListing.size();
	
	List<TransGoodsDesc> goodsDescListing = (List<TransGoodsDesc>)request.getAttribute("goodDescs");
	int goodDescsSize = 0;
	if (goodsDescListing!=null)
		goodDescsSize = goodsDescListing.size();
	
	List<Customer> customerListing = (List<Customer>)request.getAttribute("customerListing");
	List<Voyage> voyageListing = (List<Voyage>)request.getAttribute("voyageListing");
	List<City> cityListing = (List<City>) request.getAttribute("cityListing");
	List<Port> portListing = (List<Port>) request.getAttribute("portListing");
	List<Paying> payingListing = (List<Paying>) request.getAttribute("payingListing");
	List<Clause> clauseListing = (List<Clause>) request.getAttribute("clauseListing");
	List<Fee> feeListing = (List<Fee>) request.getAttribute("feeListing");
	List<Commodity> commodityListing = (List<Commodity>) request.getAttribute("commodityListing");
	List<Equipment> equipmentListing = (List<Equipment>) request.getAttribute("equipmentListing");
	List<KindPackage> kindPackageListing = (List<KindPackage>) request.getAttribute("kindPackageListing");
	List<CtrKindPackage> ctrKindPackageListing = (List<CtrKindPackage>) request.getAttribute("ctrKindPackageListing");
	
	List<AdditionalClause> acListing = (List<AdditionalClause>)request.getAttribute("additionalClauses");
	int number_transparties = (Integer)request.getAttribute("numberTranspaties");
	int number_ac = (Integer) request.getAttribute("number_ac");
	
%>

	<form:form commandName="booking" method="post" action="edit_booking.html" onsubmit="return onFormSubmit(this)" id="edit_booking" name="edit_booking">
		<form:hidden path="id" />

			<table id="booking-tbl">
				<tr>
					<td class="label"><appfuse:label styleClass="desc" key="Booking.BookingDate" /></td>
					<td>
						<form:errors path="bookingDate" cssClass="fieldError" />
						<form:input path="bookingDate" class="text ui-widget-content ui-corner-all"/>
					</td>
					
					<td class="label"><appfuse:label styleClass="desc" key="Booking.IssueDate" /></td>
					<td>
						<form:errors path="issueDate" cssClass="fieldError" />
						<form:input path="issueDate" class="text ui-widget-content ui-corner-all"/>
					</td>
				</tr>
				
				<tr>
					<td class="label"><appfuse:label styleClass="desc" key="Booking.Shipper" /></td>
					<td>
						<form:errors path="shipper" cssClass="fieldError" /> 
						<input id="shipperName" name="shipperName" class="text ui-widget-content ui-corner-all" value="" />
						<form:hidden path="shipper" />
					</td>
				</tr>
				
				<tr>
					<td class="label"><appfuse:label styleClass="desc" key="Booking.Consignee" /></td>
					<td> 
						<form:errors path="consignee" cssClass="fieldError" /> 
						<input id="consigneeName" name="consigneeName" class="text  ui-widget-content ui-corner-all" value="" />
						<form:hidden path="consignee"/>
					</td>
				</tr>
				<tr>
					<td class="label"><appfuse:label styleClass="desc" key="Booking.Notify" /></td>
					<td colspan="2">
						<div id="transparties">
						<% if (number_transparties>0){ 
							for(int i=1;i<=number_transparties;i++){
						%>
							<div class="transparty">
								<c:set var="cus_id" value="<%= transPartyListing.get(i-1).getCustomer().getId() %>"/>
								<select id="transparty<%=i %>" name="transparty<%=i %>"
									class="select ui-widget-content ui-corner-all">
									<option value="0">--------</option>
									<c:forEach var="item" items="${customerListing}">
										<option value="${item.id }"
											<c:if test='${item.id == cus_id}'> 
						     					SELECTED 
						     				</c:if> 
										>
										${item.fullName}
										</option>
									</c:forEach>
								</select>
								<input type="checkbox" id="confirmed<%=i %>" class="confirmx" name="confirmed<%=i %>" <%=(transPartyListing.get(i-1).getConfirmed())?"checked":"" %> /> <label for="confirmed<%=i %>">Confirmed</label>
							</div>
						<%
							}
						}else{ 
						%>
							<div class="transparty">
								<select id="transparty1" name="transparty1"
									class="select ui-widget-content ui-corner-all">
									<option value="0">--------</option>
									<c:forEach var="item" items="${customerListing}">
										<option value="${item.id }">${item.fullName}</option>
									</c:forEach>
								</select>
								<input type="checkbox" id="confirmed1" name="confirmed1"  /> <label for="confirmed1">Confirmed</label>
							</div>
						<%} %>
						</div>
						<div id="trans-button">
							<input type="hidden" id="number_transpaties" name="number_transpaties" value="1"/>
							<button type="button" id="trans-add" name="trans-add" onclick="adding_transparty();">Add</button>
							<button type="button" id="trans-remove" name="trans-remove" onclick="remove_transparty();">Del</button>
						</div>
					</td>
				</tr>

				<tr>
					<td class="label"><appfuse:label styleClass="desc" key="Booking.Voyage" /></td>
					<td>
						<form:errors path="voyage" cssClass="fieldError" /> 
						<form:input path="voyage" />
					</td>
				</tr>

				<tr>
					<td class="label"><appfuse:label styleClass="desc" key="Booking.PortLoading" /></td>
					<td>
						<form:errors path="portLoading" cssClass="fieldError" />
						<input id="portLoadingName" name="portLoadingName" class="text  ui-widget-content ui-corner-all" value="" />
						<form:hidden path="portLoading"/>
					</td>
					
					<td class="label"><appfuse:label styleClass="desc" key="Booking.PlaceAcptCode" /></td>
					<td>
						<div class="select-value">
							<form:errors path="placeAcptCode" cssClass="fieldError" />
							<form:input path="placeAcptCode" cssClass="text ui-widget-content ui-corner-all"/>
						</div>
						<div class="select-type">
							<form:radiobutton path="placeAcptCodeType" value="City" label="City" checked="checked" />
							<form:radiobutton path="placeAcptCodeType" value="Port" label="Port" />
						</div>
					</td>
				</tr>
				
				<tr>
					<td><appfuse:label styleClass="desc" key="Booking.PortDischarge" /></td>
					<td>
						<form:errors path="portDischarge" cssClass="fieldError" />
						<input id="portDischargeName" name="portDischargeName" class="text  ui-widget-content ui-corner-all" value="" />
						<form:hidden path="portDischarge"/>
					</td>
					
					<td><appfuse:label styleClass="desc" key="Booking.FinalDestCode" /></td>
					<td>
						<div class="select-value">
							<form:errors path="finalDestCode" cssClass="fieldError" />
							<form:input path="finalDestCode" cssClass="text ui-widget-content ui-corner-all"/>
						</div>
						<div class="select-type">
							<form:radiobutton path="finalDestCodeType" value="City" label="City" checked="checked" />
							<form:radiobutton path="finalDestCodeType" value="Port" label="Port" />
						</div>
					</td>
				</tr>
				
				<tr>
					<td><appfuse:label styleClass="desc" key="Booking.PlaceDeliveryCode" /></td>
					<td>
						<div class="select-value">
							<form:errors path="placeDeliveryCode" cssClass="fieldError" />
							<form:input path="placeDeliveryCode" cssClass="text ui-widget-content ui-corner-all"/>
						</div>
						<div class="select-type">
							<form:radiobutton path="placeDeliveryCodeType" value="City" label="City" checked="checked" />
							<form:radiobutton path="placeDeliveryCodeType" value="Port" label="Port" />
						</div>
					</td>
					
					<td><appfuse:label styleClass="desc" key="Booking.PlaceFreightCode" /></td>
					<td>
						<div class="select-value">
							<form:errors path="placeFreightCode" cssClass="fieldError" />
							<form:input path="placeFreightCode" cssClass="text ui-widget-content ui-corner-all"/>
						</div>
						<div class="select-type">
							<form:radiobutton path="placeFreightCodeType" value="City" label="City" checked="checked" />
							<form:radiobutton path="placeFreightCodeType" value="Port" label="Port" />
						</div>
					
					</td>
				</tr>
				
				<tr>
					<td><appfuse:label styleClass="desc" key="Booking.GoodsDescription" /></td>
					<td colspan="3" style="width:100%;">
						<form:errors path="goodsDescription" cssClass="fieldError" />
						<form:textarea path="goodsDescription" rows="6"  cssClass="text ui-widget-content ui-corner-all" cssStyle="width:70%" />
					</td>
				</tr>
				
				<tr>
					<td><appfuse:label styleClass="desc" key="Booking.ShippingMarks" /></td>
					<td colspan="3" style="width:100%;">
						<form:errors path="shipingMarks" cssClass="fieldError" />
						<form:textarea path="shipingMarks" rows="6"  cssClass="text ui-widget-content ui-corner-all" cssStyle="width:70%" />
					</td>
				</tr>
				
				<tr>
					<td><appfuse:label styleClass="desc" key="Booking.SaleOrder" /></td>
					<td>
						<form:errors path="saleOrder" cssClass="fieldError" />
						<form:textarea path="saleOrder" rows="4" cssClass="text ui-widget-content ui-corner-all"/>
					</td>
					
					<td><appfuse:label styleClass="desc" key="Booking.CustOrder" /></td>
					<td>
						<form:errors path="custOrder" cssClass="fieldError" />
						<form:textarea path="custOrder" rows="4" cssClass="text ui-widget-content ui-corner-all"/>
					</td>
				</tr>
				
				<tr>
					<td colspan="2"><appfuse:label styleClass="desc" key="Booking.Partner" /></td>
					<td>
						<form:errors path="partner" cssClass="fieldError" />
						<form:select path="partner" items="${partnerListing}" itemLabel="name" itemValue="id" />								
					</td>
				</tr>
				
				<tr>
					<td><appfuse:label styleClass="desc" key="Booking.Paying" /></td>
					<td>
						<form:errors path="paying" cssClass="fieldError" />
						<form:input path="paying"/>
					</td>
				</tr>
				
				<tr>
					<td><appfuse:label styleClass="desc" key="Booking.AdditionalClause" /></td>
					<td colspan="3">
						<input type="text" id="additional-clause" name="additional-clause" class="text ui-widget-content ui-corner-all"/>
					</td>
				</tr>
				
				<tr>
					<td ><appfuse:label styleClass="desc" key="Booking.TransFreight" /></td>
					<td colspan="3">
						<div id="trans-freights">
							<% if (transFreightSize > 0){ %>
								<% for(int i= 1; i<= transFreightSize; i++){ %>
									<div class="trans-freight">
										<table >
											<tr>
												<td><appfuse:label styleClass="desc" key="TransFreight.Fee" /></td>
												<td colspan="2">
													<input id="fee<%=i %>" name="fee<%=i %>" class="text ui-widget-content ui-corner-all"/>
												</td>
												<td><input type="checkbox" id="payed<%=i %>" name="payed<%=i %>" <%=(transFreightListing.get(i-1).getPayed())?"checked":"" %> /><label for="payed<%=i %>" >Payed</label></td>
											</tr>
											<tr>
												<td><appfuse:label styleClass="desc" key="TransFreight.Amount" /></td>
												<td>
													<input id="amount<%=i %>" name="amount<%=i %>" class="text ui-widget-content ui-corner-all" />
												</td>
												<td><appfuse:label styleClass="desc" key="TransFreight.PayedDate" /></td>
												<td>
													<input id="payedDate<%=i %>" name="payedDate<%=i %>" class="text ui-widget-content ui-corner-all" />
												</td>
											</tr>
											<tr>
												<td><appfuse:label styleClass="desc" key="TransFreight.Description" /></td>
												<td colspan="3">
													<textarea rows="4" id="description<%=i %>" name="description<%=i %>" class="text ui-widget-content ui-corner-all" style="width: 100%;"> </textarea>
												</td>
											</tr>
										</table>
									</div>
								<%} %>
							<% }else{ %>
							<div class="trans-freight">
								<table >
									<tr>
										<td><appfuse:label styleClass="desc" key="TransFreight.Fee" /></td>
										<td colspan="2">
											<input id="fee1" name="fee1" class="text ui-widget-content ui-corner-all"/>
										</td>
										<td><input type="checkbox" id="payed1" name="payed1" /><label for="payed1" >Payed</label></td>
									</tr>
									<tr>
										<td><appfuse:label styleClass="desc" key="TransFreight.Amount" /></td>
										<td>
											<input id="amount1" name="amount1" class="text ui-widget-content ui-corner-all" />
										</td>
										<td><appfuse:label styleClass="desc" key="TransFreight.PayedDate" /></td>
										<td>
											<input id="payedDate1" name="payedDate1" class="text ui-widget-content ui-corner-all" />
										</td>
									</tr>
									<tr>
										<td><appfuse:label styleClass="desc" key="TransFreight.Description" /></td>
										<td colspan="3">
											<textarea rows="4" id="description1" name="description1" class="text ui-widget-content ui-corner-all" style="width: 100%;"> </textarea>
										</td>
									</tr>
								</table>
							</div>
							<% } %>
						</div>
						<div id="freight-buttons">
							<input type="hidden" id="number_transfreights" name="number_transfreights" value="1"/>
							<button type="button" id="add_freight" name="add_freight" onclick="adding_freight();">Add</button>
							<button type="button" id="remove_freight" name="remove_freight" onclick="removing_freight();">Del</button>
						</div>
					</td>
				</tr>
				
				<tr>
					<td ><appfuse:label styleClass="desc" key="Booking.TransGoodsDesc" /></td>
					<td colspan="3">
						<div id="goods-descs">
						<% if (goodDescsSize > 0){ %>
							<% for (int i=1 ; i<= goodDescsSize; i++){ %>
								<div class="goods-desc">
									<table>
										<tr>
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.Equipment" /></td>
											<td>
												<input id="equipment<%=i %>" name="equipment<%=i %>" class="text ui-widget-content ui-corner-all"/>
											</td>
											
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.Commodity" /></td>
											<td>
												<input id="commodity<%=i %>" name="commodity<%=i %>" class="text ui-widget-content ui-corner-all"/>
											</td>
										</tr>
										
										<tr>
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.Quantity" /></td>
											<td>
												<input id="quantity<%=i %>" name="quantity<%=i %>" class="text ui-widget-content ui-corner-all"/>
											</td>
											
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.SealNo" /></td>
											<td>
												<input id="sealNo<%=i %>" name="sealNo<%=i %>" class="text ui-widget-content ui-corner-all"/>
											</td>
										</tr>
										
										<tr>
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.Weight" /></td>
											<td>
												<input id="weight<%=i %>" name="weight<%=i %>" class="text ui-widget-content ui-corner-all"/>
											</td>
											
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.Measurement" /></td>
											<td>
												<input id="measurement<%=i %>" name="measurement<%=i %>" class="text ui-widget-content ui-corner-all"/>
											</td>
										</tr>
										
										<tr>
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.KindPackage" /></td>
											<td>
												<input id="kindPackage<%=i %>" name="kindPackage<%=i %>" class="text ui-widget-content ui-corner-all"/>
											</td>
											
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.CtrKindPackage" /></td>
											<td>
												<input id="ctrKindPackage<%=i %>" name="ctrKindPackage<%=i %>" class="text ui-widget-content ui-corner-all"/>
											</td>
										</tr>
										
										<tr>
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.Description" /></td>
											<td colspan="3">
												<textarea rows="3" id="descriptionDesc<%=i %>" name="descriptionDesc<%=i %>" class="text ui-widget-content ui-corner-all" style="width: 70%"></textarea>
											</td>
										</tr>
									</table>
								</div>	
							<% } %>
						<% }else{ %>
								<div class="goods-desc">
									<table>
										<tr>
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.Equipment" /></td>
											<td>
												<input id="equipment1" name="equipment1" class="text ui-widget-content ui-corner-all"/>
											</td>
											
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.Commodity" /></td>
											<td>
												<input id="commodity1" name="commodity1" class="text ui-widget-content ui-corner-all"/>
											</td>
										</tr>
										
										<tr>
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.Quantity" /></td>
											<td>
												<input id="quantity1" name="quantity1" class="text ui-widget-content ui-corner-all"/>
											</td>
											
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.SealNo" /></td>
											<td>
												<input id="sealNo1" name="sealNo1" class="text ui-widget-content ui-corner-all"/>
											</td>
										</tr>
										
										<tr>
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.Weight" /></td>
											<td>
												<input id="weight1" name="weight1" class="text ui-widget-content ui-corner-all"/>
											</td>
											
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.Measurement" /></td>
											<td>
												<input id="measurement1" name="measurement1" class="text ui-widget-content ui-corner-all"/>
											</td>
										</tr>
										
										<tr>
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.KindPackage" /></td>
											<td>
												<input id="kindPackage1" name="kindPackag1e" class="text ui-widget-content ui-corner-all"/>
											</td>
											
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.CtrKindPackage" /></td>
											<td>
												<input id="ctrKindPackage1" name="ctrKindPackage1" class="text ui-widget-content ui-corner-all"/>
											</td>
										</tr>
										
										<tr>
											<td><appfuse:label styleClass="desc" key="TransGoodsDesc.Description" /></td>
											<td colspan="3">
												<textarea rows="3" id="descriptionDesc1" name="descriptionDesc1" class="text ui-widget-content ui-corner-all" style="width: 70%"></textarea>
											</td>
										</tr>
									</table>
								</div>
							<% } %>
						</div>
						<div id="good-desc-button">
							<input type="hidden" id="number_good_desc" name="number_good_desc" value="1"/>
							<button type="button" id="add_good_desc" name="add_good_desc" onclick="adding_good_desc();">Add</button>
							<button type="button" id="remove_good_desc" name="remove_good_desc" onclick="removing_good_desc();">Del</button>
						</div>
					</td>
				</tr>
			</table>

		<span id="toolbar2" style="float: right">
			<button type="submit" id="add_maven2" class="button" name="save" onclick="bCancel=false">
				<fmt:message key="button.save" />
			</button> 
			<c:if test="${param.from == 'list' and param.method != 'Add'}">
				<button type="submit" id="delete_maven2" class="button"
					name="delete"
					onclick="bCancel=true;return confirmDelete('City Data')">
					<fmt:message key="button.delete" />
				</button>
			</c:if>
			
			<button type="submit" id="cancel_maven2" class="button" name="cancel" onclick="bCancel=true">
				<fmt:message key="button.cancel" />
			</button> 
		</span>

	</form:form>

<script type="text/javascript">
	var freight_clone = $(".trans-freight:first").clone()
	var desc_clone = $(".goods-desc:first").clone()
	/*
	 * JqueryUI button
	 */
	$(".select-type").buttonset();
	$("#add_maven, #add_maven2, #trans-add, #add_freight, #add_good_desc").button({
		icons : {
			primary : "ui-icon-circle-plus"
		}
	});

	$("#delete_maven, #delete_maven2, #trans-remove, #remove_freight, #remove_good_desc").button({
		icons : {
			primary : "ui-icon-circle-minus"
		}
	});

	$("#cancel_maven, #cancel_maven2").button({
		icons : {
			primary : "ui-icon-circle-close"
		}
	});
	
	$("#bookingDate, #issueDate").datepicker({ dateFormat: 'dd/mm/yy' });
	
	$("#number_transpaties").val(<%=number_transparties %>)

	/*
	 * Autocomplete for Shipper
	 */
	 
	 $("#shipper").val("<%=(booking.getShipper()!=null && booking.getShipper().getId()!=null) ? booking.getShipper().getId() : "" %>");
	 $("#shipperName").val("<%=(booking.getShipper()!=null && booking.getShipper().getFullName()!=null) ? booking.getShipper().getFullName() : "" %>");
	 
	 var customerListing = [
   		<%for(int i= 0;i<customerListing.size()-1;i++){ %>
   			{id: "<%=customerListing.get(i).getId()%>",value:"<%=customerListing.get(i).getFullName()%>"},
   		<%}%>
   		{id: "<%=customerListing.get(customerListing.size()-1).getId()%>",value:"<%=customerListing.get(customerListing.size()-1).getFullName()%>"}
   	];
	 
	 $("#shipperName").autocomplete({
		minLength: 0,
		source: customerListing,
		focus: function( event, ui ) {
			$( "#shipperName" ).val( ui.item.value );
			return false;
		},
		select: function( event, ui ) {
			if(ui.item.value == $('#consigneeName').val()){
				alert('Shipper and Consignee must be different!')
				$('#shipperName').val("");
			}else{
				$('#shipperName').val(ui.item.value );
				$("#shipper").val(ui.item.id);	
			}
			return false;
		}
		
	});
	 $("#shipperName").focusout(function(){
		 if ($('#shipperName').val().length==0)
			 $("#shipper").val('');
	 });
	
	 /*
	  * Autocomplete for Consignee
	  */
	  $("#consignee").val("<%=(booking.getConsignee()!=null && booking.getConsignee().getId()!=null) ? booking.getConsignee().getId() : "" %>");
	  $("#consigneeName").val("<%=(booking.getConsignee()!=null && booking.getConsignee().getFullName()!=null) ? booking.getConsignee().getFullName() : "" %>");
	  
	  $("#consigneeName").autocomplete({
		minLength: 0,
		source: customerListing,
		focus: function( event, ui ) {
			$( "#consigneeName" ).val( ui.item.value );
			return false;
		},
		select: function( event, ui ) {
			if(ui.item.value == $('#shipperName').val()){
				alert('Shipper and Consignee must be different!')
				$('#consigneeName').val("");
			}else{
				$('#consigneeName').val(ui.item.value );
				$("#consignee").val(ui.item.id);
			}
			return false;
		}
		
	});
	 $("#consigneeName").focusout(function(){
		 if ($('#consigneeName').val().length==0)
			 $("#consignee").val('');
	 });
	 
	 /*
	  * Notify Partner
	  */
	 
	 function adding_transparty(){
		 var party_number = $(".transparty").length;
		 var next_party = party_number + 1;
		 if($(".transparty:last select:first").val()=="0"){
			 return false;
		 }
		 if($("#transparty"+party_number).val() == $("#transparty"+(party_number-1)).val()){
			 return false;
		 }
		 
		 var element=$(".transparty:first").clone();
		 element.find("select:first").attr("id","transparty"+next_party).attr("name","transparty"+next_party);
		 element.find("input:first").attr("id","confirmed"+next_party).attr("name", "confirmed"+next_party);
		 element.find("label:first").attr("for","confirmed"+next_party);
		 $("#transparties").append(element);
		 
		 $("#number_transpaties").val(parseInt($("#number_transpaties").val())+1);
		 
		 
	 }
	 
	 function remove_transparty(){
		 var party_number = $(".transparty").length;
		 if (party_number > 1){
			 $(".transparty:last").remove();
			 $("#number_transpaties").val(parseInt($("#number_transpaties").val())-1);
		 }
	 }
	 
	 /*
	  *Voyage
	  */
	  var voyageListing = [
   	 	<% for(int i=0; i<voyageListing.size()-1;i++){%>
   	 	{id: <%=voyageListing.get(i).getId()%>, name:"<%=voyageListing.get(voyageListing.size()-1).getVessel().getCode() %> - <%=voyageListing.get(i).getCode()%>"},
   	 	<%}%>
   	 	{id:<%=voyageListing.get(voyageListing.size()-1).getId()%>,name:"<%=voyageListing.get(voyageListing.size()-1).getVessel().getCode()%> - <%=voyageListing.get(voyageListing.size()-1).getCode()%>"}
   	 ];
	 
	  $("#voyage").tokenInput(voyageListing, {
		  <% if (booking.getVoyage()!=null){%>
		  prePopulate: [{id:<%=booking.getVoyage().getId() %>,name:"<%=booking.getVoyage().getVessel().getCode() %> - <%=booking.getVoyage().getCode()%>"}],	
		  <% }%>
		  theme:"facebook-tiny",
		  tokenLimit: 1,
		  hintText: "Type a Voyage/Vessel"
	  });
	  
	 
	 /*
	  *Place Acceptance Code
	  */
	  var portListing = [
  		<%for(int i= 0;i<portListing.size()-1;i++){%>
  		{id: "<%=portListing.get(i).getId()%>",value:"<%=portListing.get(i).getName()%>"},
  		<%}%>
  		{id: "<%=portListing.get(portListing.size()-1).getId()%>",value:"<%=portListing.get(portListing.size()-1).getName()%>"}
  	  ];
	 
	 var cityListing = [
	 	<% for(int i=0; i<cityListing.size()-1;i++){%>
	 	{id: "<%=cityListing.get(i).getId()%>",value:"<%=cityListing.get(i).getName()%>, <%=cityListing.get(i).getCountry().getName() %>"},
	 	<%}%>
	 	{id:"<%=cityListing.get(cityListing.size()-1).getId()%>",value:"<%=cityListing.get(cityListing.size()-1).getName()%>, <%=cityListing.get(cityListing.size()-1).getCountry().getName()%>"}
	 ];
	 
	 $("#placeAcptCode").autocomplete({
			minLength: 0,
			source: cityListing,
			focus: function( event, ui ) {
				$( "#placeAcptCode" ).val( ui.item.value );
				return false;
			},
			select: function( event, ui ) {
				$('#placeAcptCode').val(ui.item.value );
				return false;
			}
			
		});
	 
	 $("input[name='placeAcptCodeType']").change(function(){
		 if ($("input[name='placeAcptCodeType']:checked").val() == "Port"){
			 $("#placeAcptCode").autocomplete("option","source",portListing);
		 }else{
			 $("#placeAcptCode").autocomplete("option","source",cityListing);
		 }
		 $("#placeAcptCode").val("");
	 });
	 
	 /*
	  *Final Destination Code 
	  */
	  $("#finalDestCode").autocomplete({
			minLength: 0,
			source: cityListing,
			focus: function( event, ui ) {
				$( "#finalDestCode" ).val( ui.item.value );
				return false;
			},
			select: function( event, ui ) {
				$('#finalDestCode').val(ui.item.value );
				return false;
			}
			
		});
	 
	 $("input[name='finalDestCodeType']").change(function(){
		 if ($("input[name='finalDestCodeType']:checked").val() == "Port"){
			 $("#finalDestCode").autocomplete("option","source",portListing);
		 }else{
			 $("#finalDestCode").autocomplete("option","source",cityListing);
		 }
		 $("#finalDestCode").val("");
	 });
	 
	 /*
	  * Place Delivery Code 
	  */
	  $("#placeDeliveryCode").autocomplete({
			minLength: 0,
			source: cityListing,
			focus: function( event, ui ) {
				$( "#placeDeliveryCode" ).val( ui.item.value );
				return false;
			},
			select: function( event, ui ) {
				$('#placeDeliveryCode').val(ui.item.value );
				return false;
			}
			
		});
	 
	 $("input[name='placeDeliveryCodeType']").change(function(){
		 if ($("input[name='placeDeliveryCodeType']:checked").val() == "Port"){
			 $("#placeDeliveryCode").autocomplete("option","source",portListing);
		 }else{
			 $("#placeDeliveryCode").autocomplete("option","source",cityListing);
		 }
		 $("#placeDeliveryCode").val("");
	 }); 
	 
	 /*
	  * Place of Freight Code PlaceFreightCode
	  */
	  
	  $("#placeFreightCode").autocomplete({
			minLength: 0,
			source: cityListing,
			focus: function( event, ui ) {
				$( "#placeFreightCode" ).val( ui.item.value );
				return false;
			},
			select: function( event, ui ) {
				$('#placeFreightCode').val(ui.item.value );
				return false;
			}
			
		});
	 
	 $("input[name='placeFreightCodeType']").change(function(){
		 if ($("input[name='placeFreightCodeType']:checked").val() == "Port"){
			 $("#placeFreightCode").autocomplete("option","source",portListing);
		 }else{
			 $("#placeFreightCode").autocomplete("option","source",cityListing);
		 }
		 $("#placeFreightCode").val("");
	 });
	 
	 /*
	  * Loading port
	  */
	  $("#portLoading").val("<%=(booking.getPortLoading()!=null && booking.getPortLoading().getId()!=null) ? booking.getPortLoading().getId() : "" %>");
	  $("#portLoadingName").val("<%=(booking.getPortLoading()!=null && booking.getPortLoading().getName()!=null) ? booking.getPortLoading().getName() : "" %>");
	  
	  $("#portLoadingName").autocomplete({
		minLength: 0,
		source: portListing,
		focus: function( event, ui ) {
			$( "#portLoadingName" ).val( ui.item.value );
			return false;
		},
		select: function( event, ui ) {
			$('#portLoadingName').val(ui.item.value );
			$("#portLoading").val(ui.item.id);
			return false;
		}
		
	});
	 $("#portLoadingName").focusout(function(){
		 if ($('#portLoadingName').val().length==0)
			 $("#portLoading").val('');
	 });
	 
	 /*
	  * portDischarge
	  */
	  
	  $("#portDischarge").val("<%=(booking.getPortDischarge()!=null && booking.getPortDischarge().getId()!=null) ? booking.getPortDischarge().getId() : "" %>");
	  $("#portDischargeName").val('<%=(booking.getPortDischarge()!=null && booking.getPortDischarge().getName()!=null) ? booking.getPortDischarge().getName() : "" %>');
	  
	  $("#portDischargeName").autocomplete({
		minLength: 0,
		source: portListing,
		focus: function( event, ui ) { 
			$( "#portDischargeName" ).val( ui.item.value );
			return false;
		},
		select: function( event, ui ) {
			$('#portDischargeName').val(ui.item.value );
			$("#portDischarge").val(ui.item.id);
			return false;
		}
		
	});
	 $("#portDischargeName").focusout(function(){
		 if ($('#portDischargeName').val().length==0)
			 $("#portDischarge").val('');
	 });
	 
	 /*
	  *Paying
	  */
	  
	  var payingListing = [
   	 	<% for(int i=0; i<payingListing.size()-1;i++){%>
   	 	{id: "<%=payingListing.get(i).getId()%>",name:"<%=payingListing.get(i).getName()%>"},
   	 	<%}%>
   	 	{id:"<%=payingListing.get(payingListing.size()-1).getId()%>",name:"<%=payingListing.get(payingListing.size()-1).getName()%>"}
   	 ];
	 
	  $("#paying").tokenInput(payingListing, {
		  <% if (booking.getVoyage()!=null){%>
		  prePopulate: [{id:<%=booking.getPaying().getId() %>,name:"<%=booking.getPaying().getName()%>"}],	
		  <% }%>
		  theme:"facebook-tiny",
		  tokenLimit: 1,
		  hintText: "Type a Paying"
	  });
	 
	 /*
	  *AdditionalClause
	  */
	  var clauseListing = [
   	 	<% for(int i=0; i<clauseListing.size()-1;i++){%>
   	 	{id: <%=clauseListing.get(i).getId()%>, name:"<%=clauseListing.get(i).getName()%>"},
   	 	<%}%>
   	 	{id:<%=clauseListing.get(clauseListing.size()-1).getId()%>,name:"<%=clauseListing.get(clauseListing.size()-1).getName()%>"}
   	 ];
	 
	 var prePop = [
		<% for(int i=0; i<acListing.size()-1;i++){%>
		{id: <%=acListing.get(i).getClause().getId()%>, name:"<%=acListing.get(i).getClause().getName()%>"},
		<%}%>
		<% if (acListing.size()>0){ %>
		{id:<%=acListing.get(acListing.size()-1).getClause().getId()%>,name:"<%=acListing.get(acListing.size()-1).getClause().getName()%>"}
		<%} %>
	 ];
	 
	  $("#additional-clause").tokenInput(clauseListing, {
		  theme: "facebook1",
		  prePopulate: prePop,
		  minChars: 0
	  });
	   
	  /*
	   *Trans Freight
	   */
	  
	  var feeListing = [
		<% for(int i=0; i<feeListing.size()-1;i++){%>
			{id: <%=feeListing.get(i).getId()%>, name:"<%=feeListing.get(i).getName()%>"},
		<%}%>
			{id:<%=feeListing.get(feeListing.size()-1).getId()%>,name:"<%=feeListing.get(feeListing.size()-1).getName()%>"}
		]
	  
	  <% if (transFreightSize>0){ %>
	  	$("#number_transfreights").val(<%=transFreightSize %>);
	  	<% for(int i= 0;i<transFreightSize;i++){ %>
	  		$("#amount<%=(i+1) %>").val(<%=transFreightListing.get(i).getAmount() %>);
	  		$("#payedDate<%=(i+1) %>").val("<%=simpleDateFormat.format(transFreightListing.get(i).getPayedDate()) %>");
	  		$("#description<%=(i+1) %>").val("<%=transFreightListing.get(i).getDescription() %>");
	  		
			$("#fee<%=i+1 %>").tokenInput(feeListing, {
				  theme:"facebook",
				  tokenLimit: 1,
				  hintText: "Type a FEE type",
				  prePopulate: [{id: <%=transFreightListing.get(i).getFee().getId() %>, name: "<%=transFreightListing.get(i).getFee().getName() %>"}]
			  });
			  $("#payedDate<%=(i+1) %>").datepicker({ dateFormat: 'dd/mm/yy' });
			  $("#amount<%=(i+1) %>").numeric();
	  	<%} %>
	  <%}else{ %>
		  $("#fee1").tokenInput(feeListing, {
			  theme:"facebook",
			  tokenLimit: 1,
			  hintText: "Type a FEE type"
		  });
		  $("#payedDate1").datepicker({ dateFormat: 'dd/mm/yy' });
		  $("#amount1").numeric();	
	  <%}%>
	  
	  
	  function adding_freight(){
		 var freight_number = $(".trans-freight").length;
		 var next_freight = freight_number + 1;
		 
		 if (freight_number>0){
			 for(var i=1;i<=freight_number;i++){
				 if($("#fee"+i).val().trim().length==0) return false;
			 }
		 }
		 
		 var element = freight_clone.clone();
		 element.find("#fee1").attr("id","fee"+next_freight).attr("name","fee"+next_freight);
		 element.find("#payed1").attr("id","payed"+next_freight).attr("name", "payed"+next_freight);
		 element.find("label:first").attr("for","payed"+next_freight);
		 element.find("#amount1").attr("id","amount"+next_freight).attr("name", "amout"+next_freight);
		 element.find("#payedDate1").attr("id","payedDate"+next_freight).attr("name", "payedDate"+next_freight);
		 element.find("#description1").attr("id","description"+next_freight).attr("name", "description"+next_freight);
		 $("#trans-freights").append(element);
			
		 $("#fee"+next_freight).tokenInput(feeListing, {
			  theme:"facebook",
			  tokenLimit: 1,
			  hintText: "Type a FEE type"
		  });
		  $("#payedDate"+next_freight).datepicker({ dateFormat: 'dd/mm/yy' });
		  $("#amount"+next_freight).numeric();
		 
		 $("#number_transfreights").val(parseInt($("#number_transfreights").val())+1);
		 
	 }
		 
	 function removing_freight(){
		 var freight_number = $(".trans-freight").length;
		 if (freight_number > 1){
			 $(".trans-freight:last").remove();
			 $("#number_transfreights").val(parseInt($("#number_transfreights").val())-1);
		 }
	 }
	 
	 /*
	  * Trans Godds Description
	  */
	  
	  var equipmentListing = [
   		<% for(int i=0; i<equipmentListing.size()-1;i++){%>
   			{id: <%=equipmentListing.get(i).getId()%>, name:"<%=equipmentListing.get(i).getName()%>"},
   		<%}%>
   			{id:<%=equipmentListing.get(equipmentListing.size()-1).getId()%>,name:"<%=equipmentListing.get(equipmentListing.size()-1).getName()%>"}
   		]
	 
	  var commodityListing = [
   		<% for(int i=0; i<commodityListing.size()-1;i++){%>
   			{id: <%=commodityListing.get(i).getId()%>, name:"<%=commodityListing.get(i).getName()%>"},
   		<%}%>
   			{id:<%=commodityListing.get(commodityListing.size()-1).getId()%>,name:"<%=commodityListing.get(commodityListing.size()-1).getName()%>"}
   		]
	 
	  var kindPackageListing = [
   		<% for(int i=0; i<kindPackageListing.size()-1;i++){%>
   			{id: <%=kindPackageListing.get(i).getId()%>, name:"<%=kindPackageListing.get(i).getName()%>"},
   		<%}%>
   			{id:<%=kindPackageListing.get(kindPackageListing.size()-1).getId()%>,name:"<%=kindPackageListing.get(kindPackageListing.size()-1).getName()%>"}
   		]
	 
	  var ctrKindPackageListing = [
   		<% for(int i=0; i<ctrKindPackageListing.size()-1;i++){%>
   			{id: <%=ctrKindPackageListing.get(i).getId()%>, name:"<%=ctrKindPackageListing.get(i).getName()%>"},
   		<%}%>
   			{id:<%=ctrKindPackageListing.get(ctrKindPackageListing.size()-1).getId()%>,name:"<%=ctrKindPackageListing.get(ctrKindPackageListing.size()-1).getName()%>"}
   		]
	 
	 <% if (goodDescsSize > 0){ %>
	 	$("#number_good_desc").val(<%=goodDescsSize %>);
	 	<% for (int i=0; i< goodDescsSize; i++){ %>
		 	$("#equipment<%=(i+1) %>").tokenInput(equipmentListing, {
				  theme:"facebook-tiny", 
				  tokenLimit: 1,
				  hintText: "Type a Equipment",
				  prePopulate: [{id: <%=goodsDescListing.get(i).getEquipment().getId() %>, name: "<%=goodsDescListing.get(i).getEquipment().getName() %>"}]
			  });
			 
			  $("#commodity<%=(i+1) %>").tokenInput(commodityListing, {
				  <%if (goodsDescListing.get(i).getCommodity()!=null){ %>
				  prePopulate: [{id: <%=goodsDescListing.get(i).getCommodity().getId() %>, name: "<%=goodsDescListing.get(i).getCommodity().getName() %>"}],
				  <%} %>
				  theme:"facebook-tiny",
				  tokenLimit: 1,
				  hintText: "Type a Commodity"
			  });
			  
			  $("#kindPackage<%=(i+1) %>").tokenInput(kindPackageListing, {
				  <% if (goodsDescListing.get(i).getKindPackage()!=null) { %>
				  prePopulate: [{id: <%=goodsDescListing.get(i).getKindPackage().getId() %>, name: "<%=goodsDescListing.get(i).getKindPackage().getName() %>"}],
				  <% } %>
				  theme:"facebook-tiny",
				  tokenLimit: 1,
				  hintText: "Type a KindPackage"
				  
			  });
			  
			  $("#ctrKindPackage<%=(i+1) %>").tokenInput(ctrKindPackageListing, {
				  <% if (goodsDescListing.get(i).getCtrKindPackage()!=null) { %>
				  prePopulate: [{id: <%=goodsDescListing.get(i).getCtrKindPackage().getId() %>, name: "<%=goodsDescListing.get(i).getCtrKindPackage().getName() %>"}],
				  <% } %>
				  theme:"facebook-tiny",
				  tokenLimit: 1,
				  hintText: "Type a CtrKindPackage"
			  });
			  
			  $("#weight<%=(i+1) %>").val(<%=goodsDescListing.get(i).getWeight() %>);
			  $("#measurement<%=(i+1) %>").val(<%=goodsDescListing.get(i).getMeasurement() %>);
			  $("#quantity<%=(i+1) %>").val(<%=goodsDescListing.get(i).getQuantity() %>);
			  $("#sealNo<%=(i+1) %>").val(<%=goodsDescListing.get(i).getSealNo() %>);
			  $("#descriptionDesc<%=(i+1) %>").val("<%=goodsDescListing.get(i).getDescription() %>");
			  <% System.out.println("..................."+goodsDescListing.get(i).getDescription()); %>
			  
			  $("#weight<%=(i+1) %>, #measurement<%=(i+1) %>").numeric();
			  $("#quantity<%=(i+1) %>").numeric(false);
	 	<% } %>
	 <% }else{ %>
		 $("#equipment1").tokenInput(equipmentListing, {
			  theme:"facebook-tiny", 
			  tokenLimit: 1,
			  hintText: "Type a Equipment"
		  });
		 
		  $("#commodity1").tokenInput(commodityListing, {
			  theme:"facebook-tiny",
			  tokenLimit: 1,
			  hintText: "Type a Commodity"
		  });
		  
		  $("#kindPackage1").tokenInput(kindPackageListing, {
			  theme:"facebook-tiny",
			  tokenLimit: 1,
			  hintText: "Type a KindPackage"
		  });
		  
		  $("#ctrKindPackage1").tokenInput(ctrKindPackageListing, {
			  theme:"facebook-tiny",
			  tokenLimit: 1,
			  hintText: "Type a CtrKindPackage"
		  });
		  
		  $("#weight1, #measurement1").numeric();
		  $("#quantity1").numeric(false);
	 <% } %>
	 
	  function adding_good_desc(){
  		 var desc_number = $(".goods-desc").length;
		 var next_desc = desc_number + 1;
		 if (desc_number > 0){
			 for(var i=1;i<=desc_number;i++){
				 if($("#equipment"+i).val().trim().length==0) return false;
				 if($("#quantity"+i).val().trim().length==0) return false;
			 }
		 }
		 
		 var element = desc_clone.clone();
		 element.find("#equipment1").attr("id","equipment"+next_desc).attr("name","equipment"+next_desc);
		 element.find("#commodity1").attr("id","commodity"+next_desc).attr("name", "commodity"+next_desc);
		 element.find("#quantity1").attr("id","quantity"+next_desc).attr("name", "quantity"+next_desc);
		 element.find("#sealNo1").attr("id","sealNo"+next_desc).attr("name", "sealNo"+next_desc);
		 element.find("#weight1").attr("id","weight"+next_desc).attr("name", "weight"+next_desc);
		 element.find("#measurement1").attr("id","measurement"+next_desc).attr("name", "measurement"+next_desc);
		 element.find("#kindPackage1").attr("id","kindPackage"+next_desc).attr("name", "kindPackage"+next_desc);
		 element.find("#ctrKindPackage1").attr("id","ctrKindPackage"+next_desc).attr("name", "ctrKindPackage"+next_desc);
		 element.find("#descriptionDesc1").attr("id","descriptionDesc"+next_desc).attr("name", "descriptionDesc"+next_desc);
		 $("#goods-descs").append(element);
			
		 $("#equipment"+next_desc).tokenInput(equipmentListing, {
			  theme:"facebook-tiny", 
			  tokenLimit: 1,
			  hintText: "Type a Equipment"
		  });
		 
		  $("#commodity"+next_desc).tokenInput(commodityListing, {
			  theme:"facebook-tiny",
			  tokenLimit: 1,
			  hintText: "Type a Commodity"
		  });
		  
		  $("#kindPackage"+next_desc).tokenInput(kindPackageListing, {
			  theme:"facebook-tiny",
			  tokenLimit: 1,
			  hintText: "Type a KindPackage"
		  });
		  
		  $("#ctrKindPackage"+next_desc).tokenInput(ctrKindPackageListing, {
			  theme:"facebook-tiny",
			  tokenLimit: 1,
			  hintText: "Type a CtrKindPackage"
		  });
		  
		  $("#weight"+next_desc).numeric();
		  $("#measurement"+next_desc).numeric();
		  $("#quantity"+next_desc).numeric(false);
		 
		 $("#number_good_desc").val(parseInt($("#number_good_desc").val())+1);
	  }
	  
	  function removing_good_desc(){
		  var desc_number = $(".goods-desc").length;
		 if (desc_number > 1){
			 $(".goods-desc:last").remove();
			 $("#number_good_desc").val(parseInt($("#number_good_desc").val())-1);
		 }
	  }
</script>